<!DOCTYPE html>
<html lang='en'>
<head>
<title>Tree view</title>
<meta charset='utf-8'/>
<style>
body {
	font-family: Arial;
}
ul.tree li {
	list-style-type: none;
	position: relative;
}
ul.tree ul {
	margin-left: 20px; padding-left: 0;
}
ul.tree li ul {
	display: none;
}
ul.tree li.open > ul {
	display: block;
}
ul.tree li div:before {
	height: 1em;
	padding:0 .1em;
	font-size: .8em;
	display: block;
	position: absolute;
	left: -1.3em;
	top: .2em;
}
ul.tree li > div {
	display: inline;
	cursor: pointer;
	color: black;
	text-decoration: none;
}
ul.tree li > div:not(:nth-last-child(2)):before {
	content: '+';
}
ul.tree li.open > div:not(:nth-last-child(2)):before {
	content: '-';
}
.sc {
	text-decoration: underline;
	text-decoration-color: black;
	font-weight: bold;
	background-color: #D9D9D9;
}
.t0 {color: #8eb48e;}
.t1 {color: #30b430;}
.t2 {color: #30b4b4;}
.t3 {color: #b43030;}
.t4 {color: #aaaa00;}
.t5 {color: #cc8000;}
.t6 {color: #a3ba66;}
</style>
<script>
function treeView(opt) {
	var tree = document.querySelectorAll('ul.tree div:not(:last-child)');
	for(var i = 0; i < tree.length; i++){
		var parent = tree[i].parentElement;
		var classList = parent.classList;
		if(opt == 0) {
			classList.add('open');
		} else {
			classList.remove('open');
		}
	}
}
function openParent(p,t) {
	if(p.parentElement.classList.contains('tree')) {
		return;
	}
	p.parentElement.classList.add('open');
	openParent(p.parentElement,t);
}
function search() {
	var tree = document.querySelectorAll('ul.tree span');
	var check = document.getElementById('check');
	for(var i = 0; i < tree.length; i++){
		tree[i].classList.remove('sc');
		if(tree[i].innerHTML.includes(document.getElementById('search').value)) {
			tree[i].classList.add('sc');
			openParent(tree[i].parentElement,tree);
		}
	}
}
function openUL(n) {
	var children = n.children;
	if(children.length == 1) {
		openNode(children[0]);
	}
}
function openNode(n) {
	var children = n.children;
	for(var i = 0; i < children.length; i++){
		if(children[i].nodeName == 'UL') {
			n.classList.add('open');
			openUL(children[i]);
		}
	}
}
function addClickActions() {
var tree = document.querySelectorAll('ul.tree div:not(:last-child)');
for(var i = 0; i < tree.length; i++){
	tree[i].addEventListener('click', function(e) {
		var parent = e.target.parentElement;
		var classList = parent.classList;
		if(classList.contains('open')) {
			classList.remove('open');
			var opensubs = parent.querySelectorAll(':scope .open');
			for(var i = 0; i < opensubs.length; i++){
				opensubs[i].classList.remove('open');
			}
		} else {
			if(e.altKey) {
				classList.add('open');
				var opensubs = parent.querySelectorAll('li');
				for(var i = 0; i < opensubs.length; i++){
					opensubs[i].classList.add('open');
				}
			} else {
				openNode(parent);
			}
		}
	});
}
}
</script>
</head>
<body>
<div style='padding-left: 25px;'>/*title:*/ view, total /*type:*/: /*count:*/ </div>
<div style='padding-left: 25px;'><button type='button' onclick='treeView(0)'>++</button><button type='button' onclick='treeView(1)'>--</button>
<input type='text' id='search' value='' size='35' onkeypress='if(event.keyCode == 13) document.getElementById('searchBtn').click()'>
<button type='button' id='searchBtn' onclick='search()'>search</button></div>
<ul class='tree'>
/*tree:*/
<script>
addClickActions();
</script>
</ul>
</body>
</html>
